<!--
 * @Author: xiaoyan
 * @Date: 2021-09-08 19:31:00
 * @LastEditors: xiaoyan
 * @LastEditTime: 2021-09-14 09:40:07
 * @Description: 登录页
 * @FilePath: \vue-ts-basic\src\views\login\index.vue
-->
<template>
    <div class="login">
      <el-form :model="form" ref="form" :rules="rules" label-width="80px" v-loading="loading">
        <el-form-item label="用户名：" prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名" clearable></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input v-model="form.password" placeholder="请输入密码" clearable></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button class="reset-btn" @click.native="reset">重置</el-button>
          <el-button class="submit-btn" type="primary" @click.native="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import {UserModule} from '@/store/modules/user'
import {AppModule} from '@/store/modules/app'
import { Route } from 'vue-router'
import { Form as ElForm } from 'element-ui'

@Component({
  name: 'Login',
  filters: {
    pluralize: (n: number, s: string) => n === 1 ? s : s + 's',
    capitalize: (s: string) => s.charAt(0).toUpperCase() + s.slice(1)
  }
})
export default class extends Vue {
  private validateUsername = (rule: any, value: string, callback: Function) => {
    if(!value){
      callback(new Error('请输入用户名'))
    }else if (value.length < 3) {
      callback(new Error('用户名不得少于3位字符'))
    } else {
      callback()
    }
  }
  private validatePassword = (rule: any, value: string, callback: Function) => {
    if(!value){
      callback(new Error('请输入密码'))
    }else if(value.length < 6) {
      callback(new Error('密码不得少于6位字符'))
    } else {
      callback()
    }
  }
  private form = {}
  private rules = {
    username: [
      { validator: this.validateUsername, trigger: 'blur' },
    ],
    password: [
      { validator: this.validatePassword, trigger: 'blur' },
    ]
  }

  private loading = false

  @Watch('$route', { immediate: true })
  private onRouteChange(route: Route) {
    
  }

  get token() {
    return UserModule.token;
  }
  get size(){
    return AppModule.size
  }
    
  created(){

  }
  mounted() {
    
  }

  private reset() {
    (this.$refs.form as ElForm).resetFields();
  }

  private login() {
    (this.$refs.form as ElForm).validate((valid:boolean)=>{
      if(valid){
        this.submit();
      }
    });
  }
  private submit(){
      //登录
  }
}
</script>

<style lang="scss" scoped>
.login{
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    .el-form{
      width:350px;
      .submit-btn{
        margin-left:130px;
      }
    }
}
</style>